<template>
  <div class="countdown" v-if="memberGamePeriod">
    <iframe ref="ifra" style="display:none" src="/static/member/sound/Rec0002.mp3"></iframe>
    <audio ref="musicl">
      <source src="/static/member/sound/win.mp3" />
    </audio>
    <span class="period"> {{memberGamePeriod.period}}</span>
    <span>期</span>
    <span>
      <span>距离封盘:</span>
      <span class="close">{{ closeTime.minutes | twoDigits }}:{{ closeTime.seconds | twoDigits }}</span>
      <span>距离开奖:</span>
      <span class="result">{{ resultTime.minutes | twoDigits }}:{{ resultTime.seconds | twoDigits }}</span>
      <span class="second">{{ requestSecond | twoDigits }}秒</span>
    </span>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

let inter = null
let sim = null
var aud = null
export default {
  name: 'period',
  computed: {
    ...mapGetters([
      'memberGamePeriod',
      'memberGameSelected',
      'memberPageSelected',
    ]),
    closeTime() {
      return this.formatTime(this.diffClose)
    },
    resultTime() {
      return this.formatTime(this.diffResult)
    },
  },
  props: {
    stop: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      now: Math.trunc(new Date().getTime() / 1000),
      date: null,
      diffClose: 0, // 离封盘时间戳
      diffResult: 0, // 离开奖时间戳
      requestInterval: 10, // 请求间隔秒数
      requestSecond: 10, // 显示秒数
    }
  },
  async created() {
    // this.$store.commit('SET_DIFFCLOSEVUEX', true)
    await this.request()
    this.setIntervalRequest()
  },
  methods: {
    setIntervalRequest() {
      clearInterval(inter)
      inter = setInterval(async() => {
        await this.request()
      }, 1000 * this.requestInterval)

      // 秒数自减
      clearInterval(sim)
      sim = setInterval(() => {
        this.diffClose--
        this.diffResult--
        this.requestSecond--
        if (this.requestSecond <= 0) {
          this.requestSecond = this.requestInterval
        }
        if (this.diffResult === 0) {
          this.$store.dispatch('MemberGamePeriod', {})
          console.log('78945613246789456123')
          this.$store.dispatch('MemberLastResult', {
            game: this.memberGameSelected,
          })
        }
        if (this.diffResult <= 0) {
          this.diffResult = 0
        }
        if (this.diffResult === 0 && this.requestSecond === 1 || this.diffResult === 1 && this.requestSecond === 1) {
          aud = this.$refs.musicl
          if (aud) {
            aud.play()
          }
        }
        if (this.diffClose <= 0) {
          this.$store.commit('SET_DIFFCLOSEVUEX', false)
        }
        if (this.diffClose > 0) {
          this.$store.commit('SET_DIFFCLOSEVUEX', true)
        }
      }, 1000)
    },
    async request() {
      // 获取对应游戏的当期信息
      await this.$store.dispatch('MemberGamePeriod', {})
      await this.$store.dispatch('MemberOrdersOdds', {
        game: this.memberGameSelected,
        page: this.memberPageSelected,
        _: parseInt(Date.now() / 1000),
      })
      if (this.memberGamePeriod) {
        // 距离封盘
        this.diffClose = this.memberGamePeriod.closeTime - this.memberGamePeriod.serverTime
        // 距离开奖
        this.diffResult = this.memberGamePeriod.resultTime - this.memberGamePeriod.serverTime
      }
    },
    seconds(diff) {
      return Math.trunc(diff) % 60
    },
    minutes(diff) {
      return Math.trunc(diff / 60) % 60
    },
    hours(diff) {
      return Math.trunc(diff / 60 / 60) % 24
    },
    days(diff) {
      return Math.trunc(diff / 60 / 60 / 24)
    },
    formatTime(diff) {
      let hours = 0
      let minutes = 0
      let seconds = 0

      if (diff > 0) {
        hours = this.hours(diff)
        minutes = this.minutes(diff)
        seconds = this.seconds(diff)
      }
      return { hours, minutes, seconds }
    },
  },
  watch: {
    stop(to, from) {
      if (to) {
        clearInterval(inter)
      } else {
        this.setIntervalRequest()
      }
    },
    memberGamePeriod(to, from) {
      // 距离封盘
      this.diffClose = this.memberGamePeriod.closeTime - this.memberGamePeriod.serverTime
      // 距离开奖
      this.diffResult = this.memberGamePeriod.resultTime - this.memberGamePeriod.serverTime
    },
  },
  filters: {
    twoDigits(value) {
      if (value.toString().length <= 1) {
        return '0' + value.toString()
      }
      return value.toString()
    },
  },
  destroyed() {
    clearInterval(inter)
  },
}
</script>

<style lang="scss" scoped>
.countdown {
  span {
    margin: 0;
    font-weight: 400;
  }
  .period {
    color: red;
    font-weight: 700;
  }
  .close {
    color: green;
    margin-right: 10px;
    font-weight: 700;
  }
  .result {
    color: red;
    margin-right: 10px;
    font-weight: 700;
  }
  .second {
    color: rgb(85, 151, 231);
    font-weight: 700;
  }
  .expired {
    font-weight: 700;
    margin: 0 200px 0 20px;
  }
}
</style>
